<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../font_l44ykp8rawg/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/gonggong.css" />
		<link rel="stylesheet" type="text/css" href="../css/quanbu.css" />
		<link rel="stylesheet" type="text/css" href="../css/xinpin.css"/>
		<link rel="stylesheet" type="text/css" href="../css/girl.css"/>
		<link rel="stylesheet" type="text/css" href="../css/box.css"/>
		<link rel="stylesheet" type="text/css" href="../css/shenghuo.css"/>
		<link rel="stylesheet" type="text/css" href="../css/quanzi.css"/>
		<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			
			#swiper1{
				height: 100%;
			}
			.quanbu{
				padding: 0 0.3rem;box-sizing: border-box;
				overflow: auto;
			}
			.xinpin{
				
				overflow: auto;
			}
			.chaog{
				
				overflow: auto;
			}
			.chaob{
				
				overflow: auto;
			}
			.shenghuo{
				
				overflow: auto;
			}
			.quanzi{
				
				overflow: auto;
			}
			#swiper2 {
				margin-top: 0.21rem;
				width: 100%;
				height: 3.8rem;
				text-align: center;
			}
			.my-bullet-active{
			  background: #fff;
			  opacity: 1;
			  width: 0.25rem;
			  border-radius:0.2rem ;
			}
		</style>
	</head>
	<body>
		<header>
			<ul>
				<li class="footer_block" style="font-size: 0.46rem;margin-left: 0;color:#101010;font-weight: 900">全部</li>
				<li>新品</li>
				<li>潮Girl</li>
				<li>潮Boy</li>
				<li>生活</li>
				<li>圈子</li>
			</ul>
			<a href="#" class="iconfont icon-fangdajing"></a>
		</header>

		<section style="flex: 1;overflow: auto;">

			<div class="swiper-container" id="swiper1">
				<div class="swiper-wrapper">
					<!-- 全部 -->
					<div class="swiper-slide slide1  quanbu">

						<div class="swiper-container" id="swiper2">
							<div class="swiper-wrapper">
								<div class="swiper-slide"><a href="size.html"><img src="../img/17.jpg" style="height: 100%;width: 100%;"></a></div>
								<div class="swiper-slide"><a href="size.html"><img src="../img/111.jpg" style="height: 100%;width: 100%;"></a></div>
								<div class="swiper-slide"><a href="size.html"><img src="../img/28.jpg" style="height: 100%;width: 100%;"></a></div>
							</div>
							<div class="swiper-pagination">
							</div>
						</div>
						<div class="xinrenli">
							<div class="">
								<h3>新人礼</h3>
								<p>注册有礼,新闻大礼包,福利多多</p>
							</div>
							<a href="#">领取</a>
						</div>

						<div class="maishou">
							<a href="size.html" class="youxuan">
								<h3>买手优选</h3>
								<p>潮流元素</p>
								<img src="../img/shoubiao.jpg">
							</a>
							<div class="zhuanqu">
								<a href="size.html" class="zhekou">
									<div class="">
										<h3>折扣专区</h3>
										<p>优享<span>8</span>折</p>
									</div>
									<img src="../img/yifu.jpg">
								</a>
								<a href="size.html" class="mai">
									<img src="../img/bao.jpg">
									<div class="">
										<h3>他们都在买</h3>
										<p>人气单品</p>
									</div>
								</a>

							</div>

						</div>

						<div class="shishang">
							NANAWANG 时尚圈的鬼马精灵
						</div>



					</div>
					
					<!-- 新品 -->
					<div class="swiper-slide slide1 xinpin">
						
						<article class="new_article ab02 ab">
							<a href="size.html">
						                        <aside class="new_banner">
						                            <img src="../img/new_banner.jpg" alt="">
						                        </aside>
						                        <aside class="show_new">
						                            <div class="shop">
						                                <img src="../img/shopimg_01.jpg" alt="">
						                                <p><i>￥</i><span>780</span></p>
						                            </div>
						                            <div class="shop">
						                                <img src="../img/shopimg_02.jpg" alt="">
						                                <p><i>￥</i><span>2680</span></p>
						                            </div>
						                            <div class="shop">
						                                <img src="../img/shopimg_03.jpg" alt="">
						                                <p><i>￥</i><span>2680</span></p>
						                            </div>
						                        </aside>
						                        <aside class="bottom_banner">
						                            <img src="../img/bottom_banner.jpg" alt="">
						                        </aside>
						                        <aside class="new_img">
						                            <div>
						                                <img src="../img/newimg3_01.jpg" alt="">
						                            </div>
						                            <div>
						                                <img src="../img/newimg3_02.jpg" alt="">
						                            </div>
						                            <div>
						                                <img src="../img/newimg3_03.jpg" alt="">
						                            </div>
						                        </aside>
											</article>
							</a>				
						
					</div>
					<!-- 潮girl -->
					<div class="swiper-slide slide1 chaog">
						
						<div class="section_3 ab03 ab">
								<a href="size.html">
						                        <aside class="girl_aside">
						                            <img src="../img/girl_banner.jpg" alt="">
						                        </aside>
						                        <aside class="girl_aside_02">
						                            <div>
						                                <img src="../img/girl_img01.jpg" alt="">
						                            </div>
						                            <div>
						                                <img src="../img/girl_img02.jpg" alt="">
						                            </div>
						                            <div>
						                                <img src="../img/girl_img03.jpg" alt="">
						                            </div>
						                        </aside>
						                        <article class="girl_article">
						                            <aside>
						                                <h2>今日主推</h2>
						                                <p>Fruit Feast Earrings水果自由耳环</p>
						                                <p>HEFANG jewelry</p>
						                            </aside>
						                            <div class="girl_article_img">
						                                <div class="girl_img1">
						                                    <img src="../img/girlimg3_01.jpg" alt="">
						                                </div>
						                                <div class="girl_img2">
						                                    <img src="../img/girlimg3_02.jpg" alt="">
						                                    <img src="../img/girlimg3_03.jpg" alt="">
						                                </div>
						                            </div>
						                        </article>
						                        <article class="girl_article2">
						                            <div class="g_article2_title">
						                                <h2>腕上潮流</h2>
						                                <p>每款手表都是纽约街头的缩影</p>
						                            </div>
						                        </article>
						                    </div>
								</a>
					</div>
					<!-- 潮boy -->
					<div class="swiper-slide slide1 chaob">
						
						<div class="section_2 ab04 ab">
								<a href="size.html">
						                        <aside class="boy_aside">
						                            <img src="../img/boy_banner.jpg" alt="">
						                        </aside>
						                        <aside class="boy_aside_02">
						                            <div>
						                                <img src="../img/boy_img01.jpg" alt="">
						                            </div>
						                            <div>
						                                <img src="../img/boy_img02.jpg" alt="">
						                            </div>
						                            <div>
						                                <img src="../img/boy_img03.jpg" alt="">
						                            </div>
						                        </aside>
						                        <article class="boy_article">
						                            <aside>
						                                <h2>欢迎你来到</h2>
						                                <p>属于你自己的DLENASTLE世界</p>
						                                <p>DLENASTLE</p>
						                            </aside>
						                            <div class="boy_article_img">
						                                <div class="boy_img1">
						                                    <img src="../img/boyimg3_01.jpg" alt="">
						                                </div>
						                                <div class="boy_img2">
						                                    <img src="../img/boyimg3_02.jpg" alt="">
						                                    <img src="../img/boyimg3_03.jpg" alt="">
						                                </div>
						                            </div>
						                        </article>
						                        <article class="boy_article2">
						                            <div class="b_article2_title">
						                                <h2>脚底时尚</h2>
						                                <p>延续今年夏季的袜子时尚</p>
						                            </div>
						                        </article>
						                    </div>
								</a>
					</div>
					<!-- 生活 -->
					<div class="swiper-slide slide1 shenghuo">
						
						<article class="live_article ab05 ab">
								<a href="size.html">
						                        <aside class="live_aside">
						                            <div class="live_img">
						                                <img src="../img/live_img_01.jpg" alt="生活">
						                                <div>
						                                    <h2>推荐</h2>
						                                    <p>日本超人气便当盒尽享更精致的便当时光</p>
						                                    <span>TAKENAKA</span>
						                                </div>
						                            </div>
						                        </aside>
						                        <aside class="live_aside">
						                            <div class="live_img">
						                                <img src="../img/live_img_02.jpg" alt="生活">
						                                <div class="bk_red">
						                                    <h2>推荐</h2>
						                                    <p>让你一秒喝到冰饮</p>
						                                    <span>Chill Facto</span>
						                                </div>
						                            </div>
						                        </aside>
						                    </article>
								</a>
					</div>
					<!-- 圈子 -->
					<div class="swiper-slide slide1 quanzi">
						
						<div class="ab06 ab ab_end">
						                        <div id="section_nav">
						                            <figure>
						                                <img src="../img/userimg1.jpg" alt="">
						                                <figcaption>变身大懒虫</figcaption>
						                            </figure>
						                            <figure>
						                                <img src="../img/userimg2.jpg" alt="">
						                                <figcaption>海螺姑娘</figcaption>
						                            </figure>
						                            <figure>
						                                <img src="../img/userimg3.jpg" alt="">
						                                <figcaption>夜下的星空</figcaption>
						                            </figure>
						                            <figure>
						                                <img src="../img/userimg4.jpg" alt="">
						                                <figcaption></figcaption>
						                            </figure>
						                        </div>
						                        <div id="trends">
						                            <div id="trends_nav">
						                                <div id="trends_nav_top">
						                                    <img src="../img/username.jpg" alt="">
						                                    <div>
						                                        <h3>当代恶臭男青年</h3>
						                                        <p>
						                                            <a href="">8小时前</a><span>来自iPhone</span>
						                                        </p>
						                                    </div>
						                                </div>
						                                <a href="" id="trends_a">+关注</a>
						                            </div>
						                            <h2>欧洲街头的时尚......</h2>
						                            <div id="trends_bottom">
													<a href="size.html">
						                                <div id="nameimg">
						                                    <img src="../img/nameimg1.jpg" alt="">
						                                    <img src="../img/nameimg2.jpg" alt="">
						                                    <img src="../img/nameimg3.jpg" alt="">
														</div>
													</a>
						                                <p>
						                                    <a class="iconfont icon-dingwei"></a>
						                                    <span>Via della Commanda,12,20122 Milano.意大利</span>
						                                </p>
						                                <div id="zan">
						                                    <p><img src="../img/zhan.jpg" alt="">
						                                        <a class="iconfont icon-heart"></a><span>323</span>
						                                    </p>
						                                    <span class="iconfont icon-xinxi zan-span"></span>
						                                </div>
						                            </div>
						                        </div>
						                        <div id="trends1">
						                            <div id="trends_nav1">
						                                <div id="trends_nav_top1">
						                                    <img src="../img/username.jpg" alt="">
						                                    <div>
						                                        <h3>林深时见路</h3>
						                                        <p>
						                                            <a href="">8小时前</a><span>来自iPhone</span>
						                                        </p>
						                                    </div>
						                                </div>
						                                <a href="" id="trends_a1">+关注</a>
						                            </div>
						                            <h2>Roger Vivier罗杰·维维亚女士牛皮棕色手提包</h2>
						                            <div id="trends_bottom1">
						                                <div id="nameimg1">
														<a href="size.html">	
															<img src="../img/nameimg4.jpg" style="width: 6.9rem" alt="">
														</a>	
						                                </div>
						                                <p>
						                                    <a class="iconfont icon-dingwei"></a>
						                                    <span>Via della Commanda,12,20122 Milano.意大利</span>
						                                </p>
						                                <div id="zan1">
						                                    <p><img src="../img/zhan.jpg" alt="">
						                                        <a class="iconfont icon-heart"></a><span>323</span>
						                                    </p>
						                                    <span class="iconfont icon-xinxi zan-span"></span>
						                                </div>
						                            </div>
						                        </div>
						                        <!--圈子 结束 -->
						                    </div>
						
					</div>
					
				</div>
			</div>

		</section>

		<footer>
			<figure>
				<a href="#" class="iconfont icon-shouye"></a>
				<figcaption>精选</figcaption>
			</figure>
			<figure style="margin-right: 1.2rem;">
				<a href="#" class="iconfont icon-sousuo"></a>
				<figcaption>分类</figcaption>
			</figure>

			<img src="../img/tutu.jpg" style="height: 1.48rem;width: 1.48rem" />

			<figure style="margin-left: 1.2em;">
				<a href="#" class="iconfont icon-gouwuche"></a>
				<figcaption>购物车</figcaption>
			</figure>
			<figure>
				<a href="#" class="iconfont icon-wode"></a>
				<figcaption>我的</figcaption>
			</figure>
		</footer>
		<script src="../js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var mySwiper1 = new Swiper('#swiper1', {
				autoplay: false, //可选选项，自动滑动
			})

			var mySwiper2 = new Swiper('#swiper2', {
				autoplay: true, //可选选项，自动滑动
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
					bulletActiveClass: 'my-bullet-active',
				},
			
			})
			
			
			//tab点击切换silde
			var tabItem = $('header ul li');
			tabItem.click(function() {
			    var ind = $(this).index();
			    changeTab(ind);
			    mySwiper1.slideTo(ind, 500, false);
				
			});
			//头部改变事件
			function changeTab(index) {
			    tabItem.eq(index).animate({
			        fontSize: 0.46 + 'rem',
			    }, 430).siblings().stop().animate({
			        fontSize: 0.24 + 'rem',
			    }, 430);
			    tabItem.eq(index).css({
			        color: '#101010',
					fontWeight:900,
			    }).siblings().css({
			        color: '#999',
					fontWeight:500,
			    });
			    //移动到首页底部出现 其余隐藏
			    if (tabItem.eq(index).hasClass('footer_block')) {
			        $('footer').show();
			    } else {
			        $('footer').hide();
			    }
			}
			
			let con = document.querySelector('#swiper1')
			let sli = document.querySelectorAll('.slide1')
			con.ontouchend = function(){
				let InDex = [...sli].findIndex(function(v){
					return v.classList.contains('swiper-slide-active')
				})
				changeTab(InDex)
			}
			
			
			$("footer img").hover(function () {
                $('footer img').prop("src", '../img/hong1.jpg');
            }, function () {
                $("footer img").prop("src", "../img/tutu.jpg");
			})
			$("footer figure").hover(function (e) {
				let time =  $(this).index() 
				if($(this).index()>2){
					time -- 
				}
				$('footer figure .iconfont').eq(time).css({color:'#000'});
                $('footer figure figcaption').eq(time).css({color:'#000'});
            }, function () {
				$('footer figure .iconfont').css({color:'#999'});
				$('footer figure figcaption').css({color:'#999'});
            })
		</script>

	</body>
</html>
